
var width = 1200,
height = 700;

var chinaG = 0;

var projection = d3.geo.mercator()
          .scale(width/1.5)          //对地图进行缩放
          .translate([width / 2 , height / 2])     //将地图平移到屏幕中间        
          .center([95, 37.5])          //设置中心点，//这里根据地图经纬度数据，来设置中心调整到屏幕中心
        ;
// Draw geojson to svg path using the projection
var path = d3.geo.path().projection(projection);

//init color mapping function;
var color = "blue";

//init svg svg;
var svg = d3.select("body").append("svg")
              .attr("width",1200).attr("height",670)
              .attr("class",color);

    d3.json("2013GKLQL.json",function(error,data) {     
        var maxRate = d3.max(data["datas"],function(d) {
            return parseFloat(d["rate"]);
        });      
        var rateToColor = d3.scale.quantize()
        .domain([0, maxRate])
        .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));      
        provinceColorData = {};    
        for(var dataIndex in data["datas"]) {
            var rate = parseFloat(data["datas"][dataIndex]["rate"]);
           // console.log(rate);
            var province = data["datas"][dataIndex]["province"];

            var provinceInfo = {};
            provinceInfo["rateVal"] = data["datas"][dataIndex]["rate"];
            provinceInfo["rateColor"] = rateToColor(rate);
            //store the province info by province key
            provinceColorData[province] = provinceInfo;
        }
        drawTheHeatMap(provinceColorData);
    });

/*-******************开始**************************-*/
    d3.json("china.topojson", function(error, toporoot) {
      if (error) 
        return console.error(error);    
      //输出china.topojson的对象
      console.log(toporoot);   
      //将TopoJSON对象转换成GeoJSON，保存在georoot中
      var georoot = topojson.feature(toporoot,toporoot.objects.china);   
      //输出GeoJSON对象
      console.log(georoot);
    });
    /*--------------------------------------------------*/
    function drawTheHeatMap(data) {        
        //console.log(data);
        d3.json("china2.json", function(error,mapData){
        //这里是回调函数，如果加载成功，data就是json对象
        //执行drawChina方法绘制地图s
        //console.log(mapData);
            drawChina(mapData,data);
        });
        //画出中国地图
        function drawChina(ds){
            if(!chinaG)
                chinaG = svg.append("g");
        d3.json("places.json", function(error, places ) {
          //插入分组元素
          var location = svg.selectAll(".location")
                  .data(places.location)
                  .enter()
                  .append("g")
                  .attr("class","location")
                  .attr("transform",function(d){
                    //计算标注点的位置
                    var coor = projection([d.log, d.lat]);
                    return "translate("+ coor[0] + "," + coor[1] +")";
                  });

          //插入一个圆
          location.append("circle")
            .attr('stroke','black')
            .attr('stroke-width',1)
            .attr('fill','red')
            .attr("r",6);
          //显示景点名字
          location.append("text")
            .attr("x",-30)
            .attr("y",-20)
            .attr("font-size", 10)
            .attr("fill","black")
            .attr("font-family","simsun")
            .text(function(d){
              return d.name;
            });

          //插入一张图片
          location.append("image")
            .attr("x",10)
            .attr("y",-30)
            .attr("width",50)
            .attr("height",50)
            .attr("z-index",1999)
            .attr("xlink:href",function(d){
              return d.img;
            });
        });

        var paths = chinaG.selectAll("path")
          .data(ds.features)
          .enter()
          .insert("path")
          .attr("id", function(d){
            return d.id;
          })
          .attr("class", function(d,i) {                 
                // set the color by the province rate
                if(data[d.properties["name"]] == undefined)
                     return ;           
                //console.log(data[d.properties["name"]]["rateColor"]);                 
                return  data[d.properties["name"]]["rateColor"];
           })
          .attr("d", path)
          .attr('stroke-width','0.7px')
          .on("mouseover",function(d,i){
               // console.log(d["properties"]);
                d3.select(this)
                    .attr("class","highlight");
           })
           .on("mouseout",function(d,i){
                if(data[d.properties["name"]] == undefined)
                     return ;      
             //console.log(data[d.properties["name"]]["rateColor"]);                 
                d3.select(this)
                    .attr("class", data[d.properties["name"]]["rateColor"]);
            });
        //add title info 
        paths.append("title")
          .text(function(d){
            if(data[d.properties["name"]] == undefined)
                 return ;
            return d.properties["name"] +"5A级景点"+ data[d.properties["name"]]["rateVal"]+"个";
          });  
    }   
}

   
    

    
    